<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>我的贴子</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/common.css">
  <style type="text/css">
    .mainContent{
      height: 100%;
      padding: 3px;
      border: 0px solid #0f0;
      /*设置滚动条*/
      overflow-x: hidden;
      overflow-y: scroll;
      /*解决ios上滑动不流畅*/
      -webkit-overflow-scrolling: touch;
      /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
    }
      /*设置滚动条，谷歌内核webkit*/
    .container ::-webkit-scrollbar {
        display: none;
    }
    /*设置滚动条，IE或者Firefox*/
    .container {
        -ms-overflow-style: none; /*IE 10+*/
        overflow: -moz-scrollbars-none; /*Firefox*/
    }
    .deleteMyArticleBtn{
      border:0px solid red;
      position: absolute;
      right: 0px;
      top: 0px;
      padding: 0px 8px;
      background-color: #fff;
      color:#000;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="bar bar-nav header">
      <a class="button button-link button-nav pull-left back" href="${pageContext.request.contextPath }/user/04/me.jsp">
        <span class="icon icon-left"></span>返回
      </a>
      <h1 class='title'>我的贴子</h1>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent" id="mainContent" onscroll="myScrollToTopFn()">
      <div class="content-wrapping">
        <div class="myIssueDiv">
          <!-- 遍历articleList -->
          <c:forEach items="${myArticleList }" var="article">
	          <div class="card demo-card-header-pic">
	            <div class="card-header color-white no-border no-padding">
	              <!-- 删除记录 -->
	              <a href="javascript:;" class="deleteMyArticleBtn" onclick="handleDeleteArticle('${article.aid}','${user.uid}')">X</a>
	              <!-- 展示记录细节 -->
	              <a href="${pageContext.request.contextPath }/me?method=showMyIssueArticleDetail&aid=${article.aid }&foundFlag=${article.foundFlag}&invalidFlag=${article.invalidFlag}">
	                <img class='card-cover' src="${pageContext.request.contextPath }/images${article.image}" style="width: 538px;height: 250px;">
	              </a>
	            </div>
	            <div class="card-content">
	              <div class="card-content-inner">
	                <a href="${pageContext.request.contextPath }/me?method=showMyIssueArticleDetail&aid=${article.aid }&foundFlag=${article.foundFlag}&invalidFlag=${article.invalidFlag}"
	                  style="color: #000;">
	                  <strong>
	                    <c:set value="${article.title}" var="myTitle"></c:set>
	                    <c:choose>
	                      <c:when test="${fn:length(myTitle)>15}">
	                        <c:out value="${fn:substring(myTitle, 0 ,15) }...... "/>
	                      </c:when>
	                      <c:otherwise>
	                        <c:out value="${myTitle}"/>
	                      </c:otherwise>
	                    </c:choose>
	                  </strong>
	                  <span class="color-gray" style="float: right;">
                      <c:choose>
                        <c:when test="${article.invalidFlag==0}"><span style="color:#f00;">已失效</span></c:when>
                        <c:when test="${article.foundFlag == 0}"><span style="color:#007BFF;">已找到</span></c:when>
                        <c:when test="${article.foundFlag == 2}"><span style="color:#17A2B8;">预约领取中</span></c:when>
                        <c:when test="${article.foundFlag == 1}"><span>未找到</span></c:when>
                      </c:choose>
	                  </span>
	                </a>
	                <p>
                    <strong>
                      <c:set value="${article.detailInfo}" var="detailInfo"></c:set>
                      <c:choose>
                        <c:when test="${fn:length(detailInfo)>50}">
                          <c:out value="${fn:substring(detailInfo, 0 ,50) }...... "/>
                        </c:when>
                        <c:otherwise>
                          <c:out value="${detailInfo}"/>
                        </c:otherwise>
                      </c:choose>
                    </strong>
	                </p>
	              </div>
	            </div>
	            <div class="card-footer">
	              <span>发布于 ${article.issueTime }</span>
	              <span>
                  <c:choose>
                    <c:when test="${article.whatFlag == 0 }">寻找失主</c:when>
                    <c:when test="${article.whatFlag == 1 }">寻找失物</c:when>
                  </c:choose>
	              </span>
	            </div>
	          </div>
          </c:forEach>
        </div>
        <div class="article-end text-center" style="padding: 10px;display: none;">已经到底啦～</div>
      </div>
    </div><!-- end of .mainContent -->
  </div> <!-- end of .container -->

  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script type="text/javascript">
      // 获取滚动的元素
      var scrollArticle = document.getElementById("mainContent")
      // 回到顶部函数
      function myScrollToTopFn() {
        // 获取滚动后的scrollTop值
        var articleScrollTop = scrollArticle.scrollTop 
        // 滚动一定距离后，显示回到顶部标识；否则复原
        if ( articleScrollTop > 200 ) {
          $('.article-end').css('display','block') // 到底通知显示
        } else {
          $('.article-end').css('display','none')
        }
      } // end of myScrollToTopFn()

      function handleDeleteArticle(aid,uid){
    	  var flag = confirm("确定删除此记录？");
    	  if(flag){
	    	  $.post(
	    		  "/LostAndFound/me?method=handleDeleteArticle",
	    		  {
	    			  "aid":aid
	    		  },
	    		  function(data){ 
	    			  if(data.success){
	    				  // 重新经过servlet跳转，再跳回来此页面
	    			    window.location.href="/LostAndFound/me?method=getMyArticleListToPage&uid="+uid
	    			  }
	    		  },
	    		  "json"
	    	  );
    	  }
      } // end of handleDeleteArticle()
  </script>
</body>
</html>